<template @keyup.enter.native="onSubmit">
  <div>
    <div id="form-view">
      <el-form :inline="true" :model="queryForm" ref="ruleForm" size="mini" label-position="left" class="demo-form-inline">
        <el-row>
          <el-col :span=20>
            <el-form-item label="交易对方" prop="otherParty">
              <el-input clearable v-model="queryForm.otherParty" placeholder="交易对方"></el-input>
            </el-form-item>

            <el-form-item label="商品名称" prop="goodsName">
              <el-input clearable v-model="queryForm.goodsName" placeholder="商品名称"></el-input>
            </el-form-item>

            <el-form-item label="交易时间" prop="createTime">
              <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="createTime"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right">
              </el-date-picker>
            </el-form-item>


            <el-form-item label="类别" prop="categoryId">
              <el-select v-model="queryForm.categoryId" filterable clearable multiple placeholder="类别">
                <el-option
                    v-for="item in selectBind.categoryId"
                    :key="item.value"
                    :label="item.label.categoryName"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-search"
                           @click="onSubmit"
                >搜索</el-button>
            </el-form-item>

            <el-form-item>
              <form-popover :width="1200" :form="queryForm" trigger="click" ref="moreFormRef" form-ref="formRef" placement="bottom-end">
                <template v-slot:form>
                    <el-row>
                      <el-col :span=8>
                        <el-form-item label="交易单号" prop="transactionNo">
                          <el-input clearable v-model="queryForm.transactionNo" placeholder="交易单号"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span=8>
                        <el-form-item label="计费类型" prop="chargeType">
                          <el-select v-model="queryForm.chargeType" clearable multiple :multiple-limit="2" placeholder="计费类型">
                            <el-option
                                v-for="item in selectBind.chargeType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span=8>
                        <el-form-item label="交易金额" prop="amountMin">
                          <el-input style="width: 120px"
                                    v-model="queryForm.amountMin"
                                    type="number"
                                    auto-complete="off"
                                    clearable
                                    placeholder="最小交易金额"></el-input>
                        </el-form-item>

                        <el-form-item label="-" prop="amountMax">
                          <el-input style="width: 120px"
                                    v-model="queryForm.amountMax"
                                    type="number"
                                    auto-complete="off"
                                    clearable
                                    placeholder="最大交易金额"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span=8>
                        <el-form-item label="商户单号" prop="merchantOrderNo">
                          <el-input clearable v-model="queryForm.merchantOrderNo" placeholder="商户单号"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span=8>
                        <el-form-item label="交易状态" prop="state">
                          <el-select v-model="queryForm.state"
                                     clearable multiple :multiple-limit="2" placeholder="交易状态"
                                     style="width: 180px">
                            <el-option
                                v-for="item in selectBind.state"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span=8>
                        <el-form-item label="服务费" prop="serviceFeeMin">
                          <el-input style="width: 120px"
                                    v-model="queryForm.serviceFeeMin"
                                    type="number"
                                    auto-complete="off"
                                    clearable
                                    placeholder="最小服务费"></el-input>
                        </el-form-item>

                        <el-form-item label="-" prop="serviceFeeMax">
                          <el-input style="width: 120px"
                                    v-model="queryForm.serviceFeeMax"
                                    type="number"
                                    auto-complete="off"
                                    clearable
                                    placeholder="最大服务费"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span=8>
                        <el-form-item label="交易类型" prop="transactionType">
                          <el-input v-model="queryForm.transactionType" placeholder="交易类型"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span=8>
                        <el-form-item label="账单类型" prop="billType">
                          <el-select v-model="queryForm.billType"
                                     clearable multiple :multiple-limit="2" placeholder="账单类型"
                                     style="width: 240px">
                            <el-option
                                v-for="item in selectBind.billType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span=8>
                        <el-form-item label="退款" prop="refundAmountMin">
                          <el-input style="width: 120px"
                                    v-model="queryForm.refundAmountMin"
                                    type="number"
                                    auto-complete="off"
                                    clearable
                                    placeholder="最小退款"></el-input>
                        </el-form-item>

                        <el-form-item label="-" prop="refundAmountMax">
                          <el-input style="width: 120px"
                                    v-model="queryForm.refundAmountMax"
                                    type="number"
                                    auto-complete="off"
                                    clearable
                                    placeholder="最大退款"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span=8>
                        <el-form-item label="订单备注" prop="remark">
                          <el-input v-model="queryForm.remark" placeholder="订单备注"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span=8>
                        <el-form-item label="排序规则" prop="sort">
                          <el-select v-model="queryForm.sort" clearable placeholder="排序规则" style="width: 120px">
                            <el-option
                                v-for="item in selectBind.sort"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span=8>
                        <el-form-item label="备注" prop="userRemark">
                          <el-input v-model="queryForm.userRemark" placeholder="备注"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span=24>
                        <el-form-item label="时间段" prop="createTimePointBegin">
                          <el-time-picker
                              v-model="queryForm.createTimePointBegin"
                              value-format="HH:mm:ss"
                              placeholder="最早时间段">
                          </el-time-picker>
                        </el-form-item>

                        <el-form-item label="-" prop="createTimePointEnd">
                          <el-time-picker
                              v-model="queryForm.createTimePointEnd"
                              value-format="HH:mm:ss"
                              placeholder="最晚时间段">
                          </el-time-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>

<!--                  </el-form>-->
                </template>
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-search"
                           plain
                >更多条件</el-button>
              </form-popover>
            </el-form-item>

            <el-form-item>
              <el-button type="info"
                         size="mini"
                         circle
                         plain
                         @click="resetForm('ruleForm')"
                         icon="el-icon-refresh-right"
              >
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span=4>

            <el-form-item v-if="upload.lastBatchNo !== ''" style="float: right">
              <el-tooltip effect="light" content="撤销最近导入数据" placement="top">
                <el-button size="mini" type="warning" icon="el-icon-close"
                           @click="withdraw"
                           circle
                           plain
                >
                </el-button>
              </el-tooltip>
            </el-form-item>

            <el-form-item style="float: right">
              <el-dropdown size="mini" type="success">
                <el-tooltip effect="light" content="添加" placement="top">
                  <el-button type="success"
                             size="mini"
                             circle
                             plain
                             @click="addBill"
                             icon="el-icon-plus"
                  >
                  </el-button>
                </el-tooltip>
                <el-dropdown-menu slot="dropdown">

                  <info-popover width=160 placement="right-start">
                    <template v-slot:content>
                      <p>打开手机微信</p>
                      <p>-> 我 -> 支付</p>
                      <p>-> 钱包 -> 账单(右上角)</p>
                      <p>-> 常见问题(右上角)</p>
                      <p>-> 下载账单</p>
                      <p>-> 用于个人对账</p>
                    </template>
                    <el-upload
                        :action="upload.wechat"
                        accept=".csv"
                        :on-success="handleFileUploadSuccess"
                        :headers="upload.header"
                        :show-file-list="false"
                        :data="{ignoreDuplicate: true}"
                        :on-error="handleFileUploadFail"
                        :before-upload="beforeFileUpload"
                    >
                      <el-dropdown-item class="iconfont icon-weixin1">
                        微信账单导入
                      </el-dropdown-item>
                    </el-upload>

                  </info-popover>

                  <info-popover width=160 placement="right-start">
                    <template v-slot:content>
                      <p>电脑端打开<a href="https://www.alipay.com/" target="_blank">支付宝网站</a></p>
                      <p>-> 登陆账号</p>
                      <p>-> 交易记录</p>
                      <p>-> 账单选择日期</p>
                      <p>-> 下载账单：Excel下载</p>
                    </template>
                    <el-upload
                        :action="upload.alipay"
                        accept=".csv"
                        :on-success="handleFileUploadSuccess"
                        :headers="upload.header"
                        :show-file-list="false"
                        :data="{ignoreDuplicate: true}"
                        :on-error="handleFileUploadFail"
                        :before-upload="beforeFileUpload"
                    >
                      <el-dropdown-item class="iconfont icon-zfb-on">
                        支付宝账单导入
                      </el-dropdown-item>
                    </el-upload>
                  </info-popover>

                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>

            <el-form-item style="float: right">
              <el-tooltip effect="light" content="导出" placement="top">
                <el-button size="mini"
                           type="primary"
                           :icon="exportExcel.icon"
                           :disabled="exportExcel.enable"
                           @click="exportBills"
                           circle
                           plain
                >
                </el-button>
              </el-tooltip>
            </el-form-item>

            <el-form-item style="float: right">
              <el-dropdown size="mini" type="success">
                <el-tooltip effect="light" content="分类管理" placement="top">
                  <el-button type="warning" size="mini" circle
                             plain icon="el-icon-menu">
                  </el-button>
                </el-tooltip>
                <el-dropdown-menu slot="dropdown">
                  <single-item-form-popover
                      item-name="分类名称"
                      placement="left"
                      type="input"
                      :width=300
                      @onSubmit="addCategory"
                  >
                    <el-dropdown-item icon="el-icon-circle-plus-outline">
                      添加分类
                    </el-dropdown-item>
                  </single-item-form-popover>

                  <single-item-form-popover
                      item-name="选择要删除的分类"
                      placement="left"
                      type="select"
                      :select-item="selectBind.categoryId"
                      select-label-property="categoryName"
                      :width=300
                      @onSubmit="delCategory"
                  >
                    <el-dropdown-item icon="el-icon-remove-outline">
                      删除分类
                    </el-dropdown-item>
                  </single-item-form-popover>
                  <form-popover trigger="click" :form="editCategoryForm" :inline="true" :width=200 placement="left">
                    <template v-slot:form>
                      <el-form-item label="选定分类">
                        <el-select v-model="editCategoryForm.categoryId" filterable clearable placeholder="类别">
                          <el-option
                              v-for="item in selectBind.categoryId"
                              :key="item.value"
                              :label="item.label.categoryName"
                              :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="新名称">
                        <el-input v-model="editCategoryForm.categoryName" placeholder="新名称"></el-input>
                      </el-form-item>

                      <el-form-item>
                        <el-button type="primary" @click="editCategory">确认修改</el-button>
                      </el-form-item>
                    </template>
                    <el-dropdown-item icon="el-icon-edit-outline">
                      修改分类
                    </el-dropdown-item>
                  </form-popover>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>

    </div>

    <div id="table-view">
      <div class="edit-switch">
        <el-switch
            v-model="tableEdit"
            active-text="可编辑"
            inactive-text="只读"
        >
        </el-switch>
      </div>

      <!-- 表格 -->
      <el-table
          ref="singleTable"
          :data="billList"
          stripe
          border
          highlight-current-row
          size="mini"
          @header-click="handleHeaderClick"
          style="width: 100%">
        <el-table-column
            resizable
            show-overflow-tooltip
            prop="transactionNo"
            label="交易单号"
            width="80">
        </el-table-column>

        <el-table-column
            resizable
            show-overflow-tooltip
            prop="merchantOrderNo"
            label="商户单号"
            width="80">
        </el-table-column>

        <el-table-column
            resizable
            prop="createTimeFormatter"
            label="交易时间"
            width="150">
        </el-table-column>

        <el-table-column
            resizable
            prop="categoryName"
            label="自定义分类"
            width="140">
          <template slot-scope="scope">
            <div>
              <el-select
                  filterable
                  :key="scope.row.id + 'select'"
                  :ref="scope.row.id + 'select'"
                  @change="handleCategoryChange($event, scope)"
                  size="mini"
                  :class="{'hide': !tableEdit}"
                  v-model="scope.row.categoryId"
                  clearable placeholder="选择分类">
                <el-option
                    v-for="item in selectBind.categoryId"
                    :key="item.value"
                    :label="item.label.categoryName"
                    :value="item.value">
                </el-option>
              </el-select>
              <span
                  :key="scope.row.id + 'span'"
                  :class="{'show': !tableEdit}">
                  {{ scope.row.categoryName }}
                </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
            resizable
            show-overflow-tooltip
            prop="transactionType"
            label="交易类型"
            width="120">
        </el-table-column>

        <el-table-column
            resizable
            show-overflow-tooltip
            prop="otherParty"
            label="交易对方"
            width="200">
        </el-table-column>

        <el-table-column
            resizable
            show-overflow-tooltip
            prop="goodsName"
            label="商品名称"
            width="80">
        </el-table-column>

        <el-table-column
            resizable
            prop="amountFormatter"
            label="金额"
            width="70">
        </el-table-column>

        <el-table-column
            resizable
            prop="chargeTypeFormatter"
            label="收/支"
            width="60">
        </el-table-column>

        <el-table-column
            resizable
            prop="stateFormatter"
            label="状态"
            width="50">
        </el-table-column>

        <el-table-column
            resizable
            show-overflow-tooltip
            prop="stateDesc"
            label="状态描述"
            width="90">
        </el-table-column>

        <el-table-column
            resizable
            prop="serviceFeeFormatter"
            label="服务费"
            width="60">
        </el-table-column>

        <el-table-column
            resizable
            prop="refundAmountFormatter"
            label="退款"
            width="60">
        </el-table-column>

        <el-table-column
            resizable
            show-overflow-tooltip
            prop="remark"
            label="备注"
            width="50">
        </el-table-column>

        <el-table-column
            resizable
            prop="billTypeFormatter"
            label="账单类型"
            width="80">
        </el-table-column>

        <el-table-column
            resizable
            show-overflow-tooltip
            prop="userRemark"
            width="200"
            label="自定义备注">
          <template slot-scope="scope">
            <div>
              <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="scope.row.userRemark"
                  maxlength="200"
                  show-word-limit
                  :class="{'hide': !tableEdit}"
                  @blur="handleUserRemarkUpdate($event, scope)"
              >
              </el-input>
              <span
                  :class="{'show': !tableEdit}"
              >{{ scope.row.userRemark }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            min-width="140">
          <template slot-scope="scope">
            <el-tag
                @click="billInfo(scope.row.id)"
                type=""
                size="small"
                effect="plain"
                class="el-icon-more"
            >
            </el-tag>
            <el-tag
                @click="billEdit(scope.row.id)"
                type="warning"
                size="small"
                effect="plain"
                class="el-icon-edit"
            >
            </el-tag>
            <confirm-popover
                content="删除这笔账单？"
                placement="right-end"
                v-on:del="billDel(scope.row.id)"
            >
              <el-tag
                  type="danger"
                  size="small"
                  effect="plain"
                  class="el-icon-delete"
              >
              </el-tag>
            </confirm-popover>
          </template>
        </el-table-column>
      </el-table>
      <!--合计-->
      <div id="statistics" v-show="billList.length > 0">
        <span>
          总支出：{{ statistics.expenditure }}元，
          总收入：{{ statistics.income }}元，
          总服务费：{{ statistics.serviceFee }}元，
          总退款：{{ statistics.refundAmount }}元</span>
      </div>
      <!-- 分页 -->
      <el-pagination
          @current-change="handlePageChange"
          background
          hide-on-single-page
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handlePageSizeChange"
          :page-sizes="[10, 15, 20, 25, 30, 40, 50]"
          :current-page="queryForm.pageNum"
          :page-size="queryForm.pageSize"
          :total="page.total">
      </el-pagination>
    </div>

    <BillForm :id="billFromModal.id"
              :title="billFromModal.title"
              :visible.sync="billFromModal.visible"
              :state="selectBind.state"
              :charge-type="selectBind.chargeType"
              :category-id="selectBind.categoryId"
              v-if="billFromModal.visible"
              @billFormClose="billFormClose"></BillForm>

    <BillInfo :id="billInfoModal.id"
              :visible.sync="billInfoModal.visible"
              v-if="billInfoModal.visible"
              @billInfoClose="billInfoClose"></BillInfo>

  </div>
</template>

<script>
import getSelect from "./api/getSelect";
import getList from "./api/getList";
import getStatistics from "./api/getStatistics";
import del from "./api/delete";
import withdraw from "./api/withdraw";
import BillForm from "./modal/BillForm";
import BillInfo from "@/views/container/views/bill/modal/BillInfo";
import ConfirmPopover from "@/components/popover/ConfirmPopover";
import InfoPopover from "@/components/popover/InfoPopover";
import FormPopover from "@/components/popover/FormPopover";
import api from '@/api'
import {Loading} from 'element-ui'
import SingleItemFormPopover from "@/components/popover/SingleItemFormPopover";
import addCategory from "@/views/container/views/bill/api/addCategory";
import delCategory from "@/views/container/views/bill/api/delCategory";
import updateBillCategory from "@/views/container/views/bill/api/updateBillCategory";
import updateBillUserRemark from "@/views/container/views/bill/api/updateBillUserRemark";
import exportExcel from "@/views/container/views/bill/api/exportExcel";
import editCategory from "@/views/container/views/bill/api/editCategory";

export default {
  name: "BillData",
  components: {
    FormPopover,
    SingleItemFormPopover,
    InfoPopover,
    BillInfo,
    BillForm,
    ConfirmPopover
  },
  data() {
    return {
      exportExcel: {
        enable: false,
        icon: 'el-icon-download'
      },
      tableEdit: false,
      fullLoading: null,
      selectBind: {
        chargeType: [],
        state: [],
        categoryId: [],
        billType: [],
        sort: [],
      },
      createTime: [],
      queryForm: {
        transactionNo: '',
        merchantOrderNo: '',
        createTimeBegin: '',
        createTimeEnd: '',
        createTimePointBegin: '',
        createTimePointEnd: '',
        transactionType: '',
        otherParty: '',
        goodsName: '',
        amountMin: '',
        amountMax: '',
        chargeType: [],
        stateDesc: '',
        state: [],
        serviceFeeMin: '',
        serviceFeeMax: '',
        refundAmountMin: '',
        refundAmountMax: '',
        remark: '',
        billType: [],
        userRemark: '',
        categoryId: [],
        batchNo: '',
        pageNum: 1,
        pageSize: 10,
        sort: ''
      },
      billList: [],
      page: {
        total: 0
      },
      statistics: {
        expenditure: '',
        income: '',
        serviceFee: '',
        refundAmount: ''
      },
      //子表单属性
      billFromModal: {
        visible: false,
        title: '',
        id: ''
      },
      //详情属性
      billInfoModal: {
        visible: false,
        id: ''
      },
      // 导入账单
      upload: {
        wechat: process.env.VUE_APP_BASE_URL + '/bill/wechat',
        alipay: process.env.VUE_APP_BASE_URL + '/bill/alipay',
        header: api.getTokenHeader(),
        lastBatchNo: ''
      },
      //修改分类
      editCategoryForm: {
        categoryId: '',
        categoryName: ''
      }
    }
  },
  methods: {
    onSubmit() {
      this.queryForm.pageNum = 1;
      this.queryList();
    },
    resetForm(formName) {
      this.createTime = '';
      this.$refs[formName].resetFields();
      this.$refs['moreFormRef'].reset();
    },
    async queryList() {
      this.setFormData();
      //列表
      let listData = await getList(this.queryForm);
      if (listData.success) {
        this.billList = listData.data.records;
        this.page.total = listData.data.total;
      } else {
        return;
      }
      //合计
      let statisticsData = await getStatistics(this.queryForm);
      if (statisticsData.success) {
        this.statistics.expenditure = statisticsData.data.expenditureFormatter;
        this.statistics.income = statisticsData.data.incomeFormatter;
        this.statistics.serviceFee = statisticsData.data.serviceFeeFormatter;
        this.statistics.refundAmount = statisticsData.data.refundAmountFormatter;
      } else {
        this.statistics.expenditure = ''
        this.statistics.income = ''
        this.statistics.serviceFee = ''
        this.statistics.refundAmount = ''
      }
    },
    billFormClose(isUpdate) {
      this.billFromModal.visible = false;
      if (isUpdate) {
        this.queryList();
      }
    },
    billInfoClose() {
      this.billInfoModal.visible = false;
    },
    addBill() {
      //打开表单
      this.billFromModal.id = '';
      this.billFromModal.title = '添加账单';
      this.billFromModal.visible = true;
    },
    billInfo(id) {
      this.billInfoModal.id = id;
      this.billInfoModal.visible = true;
    },
    billEdit(id) {
      this.billFromModal.id = id;
      this.billFromModal.title = '编辑账单';
      this.billFromModal.visible = true;
    },
    async billDel(id) {
      let res = await del(id);
      if (res.success) {
        //刷新列表
        this.onSubmit();
      }
    },
    handlePageChange(val) {
      this.queryForm.pageNum = val;
      this.queryList();
    },
    setSelect() {
      this.setChargeType();
      this.setState();
      this.setCategoryId();
      this.setBillType();
      this.setSort();
    },
    async setChargeType() {
      let res = await getSelect('chargeType');
      if (res.success) {
        this.selectBind.chargeType = res.data;
      }
    },
    async setState() {
      let res = await getSelect('state');
      if (res.success) {
        this.selectBind.state = res.data;
      }
    },
    async setCategoryId() {
      let res = await getSelect('category');
      if (res.success) {
        this.selectBind.categoryId = res.data;
        await this.queryList();
      }
    },
    async setBillType() {
      let res = await getSelect('billType');
      if (res.success) {
        this.selectBind.billType = res.data;
      }
    },
    async setSort() {
      let res = await getSelect('sort');
      if (res.success) {
        this.selectBind.sort = res.data;
      }
    },
    handleFileUploadSuccess(response) {
      if (this.fullLoading) {
        this.fullLoading.close();
      }
      if (!response.success) {
        this.$message.error(response.message);
        return;
      }
      let data = response.data;
      this.$message({
        type: 'success',
        message: '上传成功，共' + data.total + '条账单数据，其中非中性账单' + data.nonNeutralBill + '条，成功添加' + data.success + '条，重复账单' + data.duplicate + '条',
        duration: 5000
      });
      if (data.success > 0) {
        this.upload.lastBatchNo = data.batchNo
      }
      //更新列表
      this.onSubmit();
    },
    handleFileUploadFail() {
      if (this.fullLoading) {
        this.fullLoading.close();
      }
      this.$message.error("文件上传失败");
    },
    beforeFileUpload(file) {
      let fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (!(fileName === 'csv')) {
        this.$message.warning('请上传csv格式文件');
        return false;
      }
      this.fullLoading = Loading.service({
        lock: true,
        text: '文件解析中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    async withdraw() {
      if (this.upload.lastBatchNo) {
        let res = await withdraw(this.upload.lastBatchNo);
        if (res.success) {
          this.upload.lastBatchNo = '';
          this.$message.success(res.message);
          this.onSubmit();
        }
        return;
      }
      this.$message.warning('最近没有导入数据');
    },
    async handleCategoryChange(categoryId, scope) {
      let res = await updateBillCategory(scope.row.id, categoryId);
      if (res.success) {
        if (!categoryId) {
          scope.row.categoryName = '';
          return;
        }
        let category = this.selectBind.categoryId.find(category => category.value === categoryId);
        if (category) {
          scope.row.categoryName = category.label.categoryName;
        } else {
          scope.row.categoryName = '';
        }
      }
    },
    async handleUserRemarkUpdate(event, scope) {
      let res = await updateBillUserRemark(scope.row.id, scope.row.userRemark);
      if (!res.success) {
        await this.queryList()
      }
    },
    handleHeaderClick() {
      if (this.tableEdit) {
        this.$refs.singleTable.setCurrentRow();
      }
    },
    async addCategory(categoryName) {
      let res = await addCategory(categoryName);
      if (res.success) {
        this.selectBind.categoryId.push({
          label: {categoryName: categoryName},
          value: res.data
        });
      }
    },
    async delCategory(categoryId) {
      if ('unclassified' === categoryId) {
        this.$message.warning('未分类标签不可删除');
        return;
      }
      let res = await delCategory(categoryId);
      if (res.success) {
        this.selectBind.categoryId.remove(item => item.value === categoryId);
      }
    },
    async handlePageSizeChange(pageSize) {
      this.queryForm.pageSize = pageSize;
      await this.onSubmit();
    },
    async exportBills() {
      this.setFormData();
      this.exportExcel.enable = true;
      this.exportExcel.icon = 'el-icon-loading';
      await exportExcel(this.queryForm);
      this.exportExcel.enable = false;
      this.exportExcel.icon = 'el-icon-download';
    },
    setFormData() {
      if (this.createTime && this.createTime.length > 0) {
        this.queryForm.createTimeBegin = this.createTime[0];
        this.queryForm.createTimeEnd = this.createTime[1];
      } else {
        this.queryForm.createTimeBegin = '';
        this.queryForm.createTimeEnd = '';
      }
    },
    async editCategory() {
      const response = await editCategory(this.editCategoryForm);
      if (response.success) {
        await this.setCategoryId();
        this.editCategoryForm.categoryId = '';
        this.editCategoryForm.categoryName = '';
      }
    }
  },
  created() {
    this.setSelect();
    this.onSubmit();
  }

}
</script>

<style scoped lang="less">

#form-view {

  .el-form {

    .el-form-item {
      float: left;

      .el-input {
        width: 150px !important;
      }

      #sort {
        width: 100px !important;
      }

      .el-select {
        width: 220px;
      }

    }

  }
}


#table-view {

  .edit-switch {
    margin-bottom: 10px;
    text-align: left;
  }

  .el-table {
    margin-bottom: 10px;

    .el-select, .el-textarea {
      display: none;
    }

    .current-row {
      .el-select, .el-textarea {
        display: block;
      }
    }

    .current-row {
      .el-select + span, .el-textarea + span {
        display: none;
      }
    }

    .current-row {
      .show {
        display: block !important;
      }

      .hide {
        display: none !important;
      }
    }

    .el-tag {
      margin-right: 5px;
      cursor: pointer;
    }

  }

  .el-pagination {
    float: right !important;
    margin-bottom: 10px;
  }
}

#statistics {
  display: inline-block;
  float: left;

  span {
    color: #606266;
    font-size: 14px;
  }
}

.icon-weixin1:before {
  color: limegreen;
}

.icon-zfb-on:before {
  color: deepskyblue;
}


</style>
